HTML - tags - area tag
Revision: January 28, 2025
Content
"area" tag : defines an area inside an image map
top
The <area> tag defines an area inside an image map (i.e. an image with clickable areas). <area> elements are always nested inside a <map> tag. The "usemap" attribute in <img> is associated with the <map> element's "name" attribute, and creates a relationship between the image and the map.
>Attributes : the <area> element supports the global attributes and events attributes. The tag also supports the following additional attributes:alt : value: text ;
specifies an alternate text for the area. Required if the "href" attribute is present .
coords : value: coordinates;
specifies the coordinates of the area.
download : value: filename;
specifies that the target will be downloaded when a user clicks on the hyperlink.
href : value: URL;
specifies the hyperlink target for the area.
hreflang : value: language_code;
specifies the language of the target URL.
media : value: media query;
specifies what media/device the target URL is optimized for.
referrerpolicy : value: no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin-when-cross-origin, unsafe-url;
>specifies which referrer information to send with the link.
rel : value: alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag ;
specifies the relationship between the current document and the target URL.
shape : value: default, rect, circle, poly;
specifies the shape of the area.
target : value: _blank, _parent, _self, _top, framename;
specifies where to open the target URL.
type : value: media_type;
specifies the media type of the target URL.
syntax
top
<area . . . . .>
some examples
top
Click on the computer, the phone, or the cup of coffee to go to a new page.
Codes:
<p class="example">Click on the computer, the phone, or the cup of coffee to go to a new page.</p>
<img src="../../pics/map.jpg" alt="map" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="https://www.lwitters.com/coding.php">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="https://www.lwitters.com/dig_art.php">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://lwitters-1.com">
</map>
example
example
Codes:
<img src ="../../image-map-1.png" width="316" height="131" alt="holidays" usemap ="#holy">
<map name="holy">
<area shape ="rect" coords ="9,10,62,123" href ="https://lwitters.com" alt="square" target="_blank" rel="noopener">
<area shape ="circle" coords ="126,76,41" href ="https:/lwitters-1.com" target="_blank" rel="noopener" alt="Circle">
<area shape ="poly" coords ="182,15,218,15,218,95,310,95,310,122,182,122" href ="https:/wikipedia.com"
target="_blank" rel="noopener" alt="L shape">
</map>
applications
top
Find the areas in the pictures by using the mouse (i.e. pointer turns to hand and title shows up when in an area.)
code:
<div>
<p>Find the areas in the pictures by using the mouse (i.e. pointer turns to hand and title shows up when in an area.)</p>
<div class="flex_container">
<img src="../../images/3.jpg" width="500" height="500" alt="holiday" usemap="#holidaymap">
<map name="holidaymap">
<area shape="rect" coords="34, 44, 104, 150" alt="rect1" title="first" href="https://lwitters.com">
<area shape="rect" coords="190, 172, 333, 250" alt="rect2" title="second" href="http://lwitters-1.com">
<area shape="circle" coords="350, 400, 44" alt="circle" title="third" href="http://peer.be">
</map>
<img src="../../images/5.jpg" alt="" usemap="#man-beach-map" />
<map name="man-beach-map" id="man-beach-map">
<area alt="man-beach" title="man-beach" href="https://lwitters.com" target="_blank" shape="circle" coords="237,500,80" />
<area alt="sky" title="sky" href="https://lwitters-1.com" target="_blank" shape="circle" coords="100,100,80" />
</map>
</div>
</div>
<style>
.flex_container{display: flex; flex-direction: row; padding: 0 1vw; justify-content:space-evenly; width: 90vw; height: 40vw; border: 1vw solid seagreen;}
</style>
code:
<div class="flex-container">
<form name = "myform">
<input type = "text" name = "stage" size = "10" />
</form>
<img src = "../../images/usemap.gif" alt = "HTML Map" usemap = "#tutor"/>
<map name = "tutor">
<area shape="poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "https://www.perl.org" alt = "Perl tutor" target = "_self" onMouseOver = "showTutor('perl')"
onMouseOut = "showTutor('')"/>
<area shape = "rect" coords = "22,83,126,125" href = "https://html.com" alt = "HTML tutor" target = "_self" onMouseOver = "showTutor('html')"
onMouseOut = "showTutor('')"/>
<area shape = "circle" coords = "73,168,32" href = "https://www.php.net" alt = "PHP tut" target = "_self" onMouseOver = "showTutor('php')"
onMouseOut = "showTutor('')"/>
</map>
</div>
<style>
.flex_container_a{display: flex; flex-direction: row; padding: 1vw; justify-content:space-evenly; border: 1vw solid seagreen;}
.flex_container_a img, .flex_container_a input{border: 0.5vw double brown;}
.flex_container_a input{color: red;font-size: 2vw}
</style>
<script type = "text/javascript">
function showTutor(name) {
document.myform.stage.value = name
}
</script>
The seven wonders of the world
Solvay Conference
code:
<div class="flex-container">
<img src="../images/seven_wonders.jpg" usemap="#imagemap" alt="Seven Wonders of the World" width="400"; height="auto"/>
<map name="imagemap">
<area href="https://www.chichenitza.com" shape="rect" coords="0,0,205,150" alt="chichen Itza" target="_blank"/>
<area href="https://www.britannica.com/topic/Christ-the-Redeemer" shape="rect" coords="210,1,410,150" alt="Christ on Corcovado Mountain" target="_blank"/>
<area href="https://www.britannica.com/topic/Great-Wall-of-China" shape="rect" coords="0,150,210,288" alt="great wall of china" target="_blank"/>
<area href="https://www.britannica.com/place/Machu-Picchu" shape="rect" coords="210,150,410,288" alt="machu picchu" target="_blank"/>
<area href="http://www.alluringworld.com/al-khazneh/" shape="rect" coords="0,290,210,440" alt="al kanzneh" target="_blank"/>
<area href="https://www.britannica.com/topic/Taj-Mahal" shape="rect" coords="210,290,405,435" alt="taj mahal"target="_blank"/>
<area href="https://www.nationalgeographic.org/encyclopedia/colosseum/" shape="rect" coords="0,440,405,650" alt="colosseum Rome"target="_blank"/>
<p>The seven wonders of the world </p>
</map>
<img src="../images/Solvay_Conference.jpg" alt="Solvay_Conference" width="600" height="400" usemap="#biography" />
<map name="biography">
<area shape="rect" coords="350,130,310,190" href="https://www.biography.com/scientist/albert-einstein" alt="Einstein" title="Einstein">
<area shape="rect" coords="320,50,360,100" href="https://www.biography.com/scientist/erwin-schrdinger" alt="Schrödinger" title="Schrödinger">
<area shape="rect" coords="420,50,450,100" href="https://www.nobelprize.org/prizes/physics/1945/pauli/biographical/" alt="Pauli" title="Pauli">
<area shape="rect" coords="160,120,200,190" href="https://www.biography.com/scientist/marie-curie" alt="Curie" title="Curie">
<area shape="rect" coords="40,120,80,190" href="https://www.nobelprize.org/prizes/physics/1918/planck/biographical/" alt="Planck" title="Planck">
<p>Solvay Conference </p>
</map>
</div>
<style>
.flex_container_b{display: flex; flex-direction: row wrap; padding: 1vw; justify-content:space-evenly; border: 1vw solid seagreen;}
.flex_container_b img, .flex_container_b input{border: 0.5vw double brown;}
.flex_container_b input{color: red;font-size: 2vw}
</style>
code:
<main>
<img src="../../images/desk.jpeg" usemap="#desk-items" />
<map name="desk-items">
<area alt="headphones" title="headphones" href="#headhphones" coords="120,364,116" shape="circle"/>
<area alt="peripherals" title="peripherals" href="#peripherals" coords="260,314,737,478" shape="rect"/>
<area alt="stationery" title="stationery" href="#stationery" coords="526,296,735,296,729,16,563,16,563,108,524,108" shape="poly"/>
</map>
<div class="popup" id="headhphones"> Splendid headphones!<a class="close" href="#">X</a></div>
<div class="popup" id="peripherals"> Fantastic peripherals: the keyboard and the mouse.<a class="close"href="#">X</a></div>
<div class="popup" id="stationery"> Indispensable tools: a notepad and a pen.<a class="close" href="#">X</a></div>
</main>
<style>
:root {--blue: #74bcdd; --dark-blue: #2d3e51; --red: #f74442; --yellow: #fbca32; --green: #5be95b;--grey: #ebeced;}
main { display: flex; align-items: center; justify-content: center;}
area { outline: 0.5vw solid var(--red);}
.popup {padding: 2vw; background-color: lightgreen; color: darkblue; font-weight: 100;font-size: 1.15vw; position: absolute;
opacity: 0; transform: scale(0); transition: opacity 300ms, transform 300ms;}
.popup:target { opacity: 1; transform: scale(1); }
.popup > .close { position: absolute; right: -1vw; top: -1vw; background-color: black; padding: 0.4vw 1vw;}
</style>
